import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import { ImageWithLoading } from '../components/ImageWithLoading';
import { ChevronRight, Star, ThumbsUp, ThumbsDown, Share2, Calendar, Clock, Award } from 'lucide-react';
export const ReviewDetailPage = () => {
  const review = {
    id: 'bp-monitors-review-2025',
    title: 'Best Blood Pressure Monitors of 2025',
    author: 'Dr. Emily Chen',
    date: 'May 15, 2025',
    readTime: '12 min read',
    category: 'Heart Health',
    heroImage: 'https://picsum.photos/1600/900?random=40',
    summary: 'After testing 15 blood pressure monitors over three months, we identified the best options for home use in 2025.',
    products: [{
      rank: 1,
      name: 'Omron Platinum Blood Pressure Monitor',
      brand: 'Omron',
      image: 'https://picsum.photos/600/400?random=omron-platinum',
      price: 89.99,
      rating: 4.8,
      reviewCount: 324,
      pros: ['Exceptional accuracy within ±2mmHg', 'Intuitive interface with large, clear display', 'Excellent app connectivity with detailed health insights', 'Long battery life (1 month with daily use)'],
      cons: ['Slightly higher price point', 'Cuff may be too large for users with very small arms'],
      verdict: 'The Omron Platinum Blood Pressure Monitor earns our top recommendation for its clinical‑grade accuracy, user‑friendly design, and excellent connectivity features.'
    }, {
      rank: 2,
      name: 'Beurer BM55 Upper Arm Monitor',
      brand: 'Beurer',
      image: 'https://picsum.photos/600/400?random=beurer-bm55-review',
      price: 69.99,
      rating: 4.6,
      reviewCount: 256,
      pros: ['Very good accuracy within ±3mmHg', 'Compact and lightweight design', 'Excellent value for money', 'Simple one‑button operation'],
      cons: ['Limited smartphone connectivity', 'Smaller display may be harder to read for some users'],
      verdict: 'The Beurer BM55 Upper Arm Monitor is our best value pick, offering reliable accuracy and ease of use at a more affordable price point.'
    }, {
      rank: 3,
      name: 'Withings BPM Connect Wi-Fi',
      brand: 'Withings',
      image: 'https://picsum.photos/600/400?random=withings-bpm-review',
      price: 129.99,
      rating: 4.7,
      reviewCount: 187,
      pros: ['Premium design with sleek aesthetics', 'Advanced health metrics and trends', 'Exceptional app experience with detailed insights', 'Integrates with other smart health devices'],
      cons: ['Higher price point', 'Setup process is more involved', 'Requires smartphone for full functionality'],
      verdict: 'The Withings BPM Connect Wi-Fi is our premium pick for tech‑savvy users who want the most comprehensive health tracking experience.'
    }],
    content: [{
      type: 'paragraph',
      content: 'Monitoring your blood pressure at home is an important part of managing heart health. With the right device, you can track your readings over time, identify patterns, and share accurate data with your healthcare provider.'
    }, {
      type: 'paragraph',
      content: 'In 2025, blood pressure monitors have evolved significantly, offering improved accuracy, better connectivity options, and more user‑friendly designs than previous generations.'
    }, {
      type: 'heading',
      content: 'How We Tested'
    }, {
      type: 'paragraph',
      content: 'Our testing process was rigorous and comprehensive. We evaluated each blood pressure monitor based on the following criteria:'
    }, {
      type: 'list',
      items: ['Accuracy: We compared readings against a professional‑grade blood pressure monitor used in clinical settings.', 'Ease of use: We assessed how intuitive the interface is, including setup, operation, and reading the display.', 'Comfort: We evaluated the cuff design and comfort during measurement.', 'Features: We tested smart features like data storage, multiple user profiles, and connectivity options.', 'Battery life: We measured how long each device lasted with regular use.', 'Value: We considered the overall value proposition, balancing price against performance and features.']
    }, {
      type: 'paragraph',
      content: 'Each monitor was used for at least two weeks by multiple testers with different arm sizes and blood pressure ranges to ensure comprehensive evaluation.'
    }],
    relatedReviews: [{
      title: 'Best Fitness Trackers for Heart Health Monitoring (2025)',
      image: 'https://picsum.photos/600/400?random=44',
      category: 'Heart Health'
    }, {
      title: 'Top Pulse Oximeters for Home Use (2025)',
      image: 'https://picsum.photos/600/400?random=45',
      category: 'Respiratory Care'
    }]
  };
  return <>
      <div className="flex flex-col min-h-screen w-full bg-white">
        <Header />
        <main className="flex-grow">
          {/* Breadcrumb */}
          <div className="bg-gray-50 py-3">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex items-center text-sm text-gray-500">
                <a href="/" className="hover:text-[#0e4c92]">
                  Home
                </a>
                <ChevronRight className="h-4 w-4 mx-2" />
                <a href="/reviews" className="hover:text-[#0e4c92]">
                  Reviews
                </a>
                <ChevronRight className="h-4 w-4 mx-2" />
                <span className="text-gray-700 font-medium">
                  {review.title}
                </span>
              </div>
            </div>
          </div>
          {/* Review header */}
          <div className="bg-white pt-8 pb-6">
            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="text-center">
                <span className="inline-block bg-[#e6f7f5] text-[#0e4c92] px-3 py-1 rounded-full text-sm font-medium">
                  {review.category}
                </span>
                <h1 className="mt-4 text-3xl md:text-4xl font-bold text-[#0e4c92]">
                  {review.title}
                </h1>
                <div className="mt-4 flex items-center justify-center text-gray-500 text-sm">
                  <span className="flex items-center">
                    <Calendar className="h-4 w-4 mr-1" />
                    {review.date}
                  </span>
                  <span className="mx-3">•</span>
                  <span className="flex items-center">
                    <Clock className="h-4 w-4 mr-1" />
                    {review.readTime}
                  </span>
                </div>
                <div className="mt-2 text-gray-600">
                  <p>By {review.author}</p>
                </div>
              </div>
            </div>
          </div>
          {/* Hero image */}
          <div className="w-full">
            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden">
                <ImageWithLoading src={review.heroImage} alt={review.title} className="w-full h-full object-center object-cover" />
              </div>
            </div>
          </div>
          {/* Review content */}
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            {/* Summary box */}
            <div className="bg-[#f5f7fa] border border-gray-200 rounded-lg p-6 mb-8">
              <h2 className="text-lg font-semibold text-gray-900">Summary</h2>
              <p className="mt-2 text-gray-600">{review.summary}</p>
              <div className="mt-6 grid gap-4 md:grid-cols-3">
                {review.products.slice(0, 3).map(product => <a key={product.rank} href={`/product/${product.name.toLowerCase().replace(/\s+/g, '-')}`} className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div className="flex items-center justify-center h-6">
                      {product.rank === 1 && <span className="flex items-center text-sm font-medium text-yellow-600">
                          <Award className="h-4 w-4 mr-1 text-yellow-500" />
                          Top Pick
                        </span>}
                      {product.rank === 2 && <span className="flex items-center text-sm font-medium text-blue-600">
                          <Award className="h-4 w-4 mr-1 text-blue-500" />
                          Best Value
                        </span>}
                      {product.rank === 3 && <span className="flex items-center text-sm font-medium text-purple-600">
                          <Award className="h-4 w-4 mr-1 text-purple-500" />
                          Premium Pick
                        </span>}
                    </div>
                    <div className="mt-2 text-center">
                      <h3 className="text-sm font-medium text-gray-900">
                        {product.name}
                      </h3>
                      <div className="mt-1 flex justify-center">
                        {[0, 1, 2, 3, 4].map(rating => <Star key={rating} className={`h-4 w-4 ${product.rating > rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-200'}`} />)}
                      </div>
                      <p className="mt-1 text-sm font-medium text-[#0e4c92]">
                        ${product.price}
                      </p>
                    </div>
                  </a>)}
              </div>
            </div>
            {/* Article content */}
            <div className="prose prose-lg max-w-none">
              {review.content.map((block, idx) => {
              if (block.type === 'paragraph') {
                return <p key={idx} className="mb-6 text-gray-700">
                      {block.content}
                    </p>;
              } else if (block.type === 'heading') {
                return <h2 key={idx} className="text-2xl font-bold text-gray-900 mt-8 mb-4">
                      {block.content}
                    </h2>;
              } else if (block.type === 'list') {
                return <ul key={idx} className="mb-6 space-y-2">
                      {block.items?.map((item, itemIdx) => (
                        <li key={itemIdx} className="text-gray-700">
                          {item}
                        </li>
                      ))}
                    </ul>;
              }
              return null;
            })}
            </div>
            {/* Product reviews */}
            <div className="mt-12 space-y-16">
              <h2 className="text-2xl font-bold text-gray-900 mb-8">
                Our Top Picks
              </h2>
              {review.products.map(product => <div key={product.rank} className="border border-gray-200 rounded-lg overflow-hidden">
                  <div className="bg-[#f5f7fa] py-3 px-6 flex items-center">
                    <span className="font-semibold text-[#0e4c92]">
                      #{product.rank}
                    </span>
                    {product.rank === 1 && <span className="ml-3 flex items-center text-sm font-medium text-yellow-600">
                        <Award className="h-4 w-4 mr-1 text-yellow-500" />
                        Top Pick
                      </span>}
                    {product.rank === 2 && <span className="ml-3 flex items-center text-sm font-medium text-blue-600">
                        <Award className="h-4 w-4 mr-1 text-blue-500" />
                        Best Value
                      </span>}
                    {product.rank === 3 && <span className="ml-3 flex items-center text-sm font-medium text-purple-600">
                        <Award className="h-4 w-4 mr-1 text-purple-500" />
                        Premium Pick
                      </span>}
                  </div>
                  <div className="p-6">
                    <div className="lg:grid lg:grid-cols-3 lg:gap-8">
                      <div className="lg:col-span-1">
                        <div className="aspect-w-1 aspect-h-1 rounded-lg overflow-hidden">
                          <ImageWithLoading src={product.image} alt={product.name} className="w-full h-full object-center object-cover" />
                        </div>
                        <div className="mt-4 text-center">
                          <h3 className="text-lg font-medium text-gray-900">
                            {product.name}
                          </h3>
                          <p className="mt-1 text-sm text-gray-500">
                            {product.brand}
                          </p>
                          <div className="mt-2 flex justify-center">
                            {[0, 1, 2, 3, 4].map(rating => <Star key={rating} className={`h-5 w-5 ${product.rating > rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-200'}`} />)}
                          </div>
                          <p className="mt-1 text-sm text-gray-500">
                            {product.rating} ({product.reviewCount} reviews)
                          </p>
                          <p className="mt-2 text-xl font-semibold text-[#0e4c92]">
                            ${product.price}
                          </p>
                          <div className="mt-4">
                            <a href={`/product/${product.name.toLowerCase().replace(/\s+/g, '-')}`} className="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#0e4c92] hover:bg-[#0a3a70]">
                              View Details
                            </a>
                          </div>
                        </div>
                      </div>
                      <div className="mt-6 lg:mt-0 lg:col-span-2">
                        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                          <div>
                            <h4 className="text-sm font-medium text-gray-900 flex items-center">
                              <ThumbsUp className="h-4 w-4 mr-2 text-green-500" />
                              Pros
                            </h4>
                            <ul className="mt-2 text-sm text-gray-600 space-y-2">
                              {product.pros.map((pro, idx) => <li key={idx} className="flex items-start">
                                  <span className="text-green-500 mr-2">+</span>
                                  <span>{pro}</span>
                                </li>)}
                            </ul>
                          </div>
                          <div>
                            <h4 className="text-sm font-medium text-gray-900 flex items-center">
                              <ThumbsDown className="h-4 w-4 mr-2 text-red-500" />
                              Cons
                            </h4>
                            <ul className="mt-2 text-sm text-gray-600 space-y-2">
                              {product.cons.map((con, idx) => <li key={idx} className="flex items-start">
                                  <span className="text-red-500 mr-2">-</span>
                                  <span>{con}</span>
                                </li>)}
                            </ul>
                          </div>
                        </div>
                        <div className="mt-6">
                          <h4 className="text-sm font-medium text-gray-900">
                            Our Verdict
                          </h4>
                          <p className="mt-2 text-sm text-gray-600">
                            {product.verdict}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>)}
            </div>
            {/* Article sharing */}
            <div className="mt-12 pt-6 border-t border-gray-200">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <button className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <ThumbsUp className="mr-2 h-4 w-4" />
                    Helpful
                  </button>
                  <button className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <ThumbsDown className="mr-2 h-4 w-4" />
                    Not helpful
                  </button>
                </div>
                <div>
                  <button className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <Share2 className="mr-2 h-4 w-4" />
                    Share
                  </button>
                </div>
              </div>
            </div>
            {/* Related reviews */}
            <div className="mt-12 pt-6 border-t border-gray-200">
              <h2 className="text-xl font-bold text-gray-900 mb-6">
                Related Reviews
              </h2>
              <div className="grid gap-6 md:grid-cols-2">
                {review.relatedReviews.map((relatedReview, idx) => <a key={idx} href="#" className="flex flex-col overflow-hidden rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">
                    <div className="flex-shrink-0">
                      <img className="h-48 w-full object-cover" src={relatedReview.image} alt={relatedReview.title} />
                    </div>
                    <div className="flex-1 bg-white p-4">
                      <p className="text-sm font-medium text-[#5cb8b2]">
                        {relatedReview.category}
                      </p>
                      <h3 className="mt-2 text-lg font-semibold text-[#0e4c92]">
                        {relatedReview.title}
                      </h3>
                    </div>
                  </a>)}
              </div>
            </div>
          </div>
        </main>
        <Footer />
      </div>
    </>;
};